<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#2d3436"
    class="el-menu-vertical-demo"
    text-color="#fff"
    :collapse="isCollapse"
    :default-active="currentPath"
    v-if="userInfo"
    router
  >
    <el-menu-item index="/">
      <el-icon><Stopwatch /></el-icon>
      <span>首页</span>
    </el-menu-item>
    <el-sub-menu
      v-for="item in userInfo.checkedkeys"
      :key="item.label"
      :index="'/' + item.path"
    >
      <template #title>
        <el-icon><Location /></el-icon>
        <span>{{ item.label }}</span>
      </template>
      <el-menu-item
        v-for="child in item.children"
        :key="child.label"
        :index="`/${item.path}/${child.path}`"
      >
        {{ child.label }}
      </el-menu-item>
    </el-sub-menu>
    <!-- <el-sub-menu index="/manager">
      <template #title>
        <el-icon><Location /></el-icon>
        <span>账户信息</span>
      </template>
      <el-menu-item index="/manager/managerlist">管理员列表</el-menu-item>
    </el-sub-menu> -->
  </el-menu>
</template>
<script>
import { Stopwatch, Location } from '@element-plus/icons-vue'
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['userInfo', 'currentPath'])
  },
  props: {
    isCollapse: {
      type: Boolean,
      isReactive: true
    }
  },
  components: {
    Stopwatch,
    Location
  }
}
</script>
<style scoped></style>
